<template>
    <div>
        <!-- 卡片区域 -->
       <el-card>
            <el-row>
                <el-col :span="24">
                    <div>
                        <el-button type="primary" @click="openAddDialog">增加学员</el-button>
                        <el-button type="primary" @click="deleteMe">删除</el-button>
                    </div>
                </el-col>
            </el-row>
       </el-card>
        <!-- 增加学生的模态框 -->
        <el-dialog
            title="增加学生"
            :visible.sync="addStudentDialogVisible"
            width="650px"
            :before-close="handleCloseAddStudentDialog">
            <el-form label-width="70px">
                <el-form-item label="姓名">
                    <el-input placeholder="请输入用户名" v-model="addStudentItem.name"/>
                </el-form-item>
                 <el-form-item label="年龄">
                    <el-input placeholder="请输入年龄" v-model="addStudentItem.age"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="addStudentItem.gender">
                        <el-option  value="男" label="男"></el-option>
                         <el-option value="女" label="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业">
                    <el-select v-model="addStudentItem.subjectsId">
                        <el-option v-for="item in subjectsAllList" :key="item._id" :label="item.name" :value="item._id"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="班级">
                        <el-select v-model="addStudentItem.classesId">
                            <el-option v-for="item in classesBySubjectList" :key="item._id" :value="item._id" :label="item.name"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                        class="avatar-uploader"
                        action="http://www.zhaijizhe.cn:3005/images/uploadImages"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="addStudentItem.image" :src="addStudentItem.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
           

            <span slot="footer" class="dialog-footer">
                <el-button @click="addStudentDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addStudentApi">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapMutations:mapTabsMutations}=createNamespacedHelpers("tabs")
export default {
    data(){
        return{
            addStudentDialogVisible:false,
            subjectsAllList:[],
            classesBySubjectList:[],
            addStudentItem:{
                name:'',
                age:'',
                gender:'',
                subjectsId:'',
                classesId:'',
                image:''
            }
        }
    },
    methods:{
        ...mapTabsMutations(['addTabs']),
        deleteMe(){
            let p=this.$api.students.deleteStudents("6409a665f763e04f125d6c23")
            console.log('p',p);
        },
        openAddDialog(){
            this.addStudentDialogVisible=true
        },
        handleCloseAddStudentDialog(){
            this.addStudentDialogVisible=false
        },
        async addStudentApi(){
            // console.log('学生对象',this.addStudentItem);
            const result=await this.$api.students.addStudents(this.addStudentItem)
            if(result.code){
                this.$message.success(result.message)
                //将表单中的数据清空
                this.addStudentItem.name=""
                this.addStudentItem.age=""
                this.addStudentItem.gender=""
                this.addStudentItem.subjectsId=""
                this.addStudentItem.classesId=""
                this.addStudentItem.image=""
                this.addStudentDialogVisible=false
            }
        },
        //获取所有的专业
        async getAllSubjects(){
            const result=await this.$api.subjects.getSubjects()
            console.log('所有专业',result.data.result);
            this.subjectsAllList=result.data.result
        },
        handleAvatarSuccess(args){
            console.log('args',args);
           this.addStudentItem.image=`http://www.zhaijizhe.cn:3005${args.data[0]}`
           
        },
        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    watch:{
        'addStudentItem.subjectsId':{
            handler:async function(newVal){
                let result=await this.$api.classes.getClassesBySubjectsId(newVal)
          
                this.classesBySubjectList=result.data.result
                this.addStudentItem.classesId=""
            }
        }
    },
    created(){
        this.getAllSubjects()
    },
    beforeRouteEnter(to,from,next){
        next(vm=>{
           vm.addTabs(to)
        })
    }
}
</script>

<style lang="scss" scoped>
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }


   .avatar-uploader ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader ::v-deep .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>